<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"  prefix="c"%>
<%@ taglib uri="http://www.gzsxt.cn/fucntions"  prefix="myFn"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!-- 访问的基本路径,此页面的所有的跳转都是基于此地址作为基本地址 -->
<base href="<%=basePath%>">

<!--主题样式-->
<link rel="stylesheet" type="text/css"href="resources/easyui/themes/default/easyui.css">
<!--图标样式-->
<link rel="stylesheet" type="text/css" href="resources/easyui/themes/icon.css">
<!--jquery文件-->
<script type="text/javascript" src="resources/easyui/jquery.min.js"></script>
<!--easyui的核心js-->
<script type="text/javascript"src="resources/easyui/jquery.easyui.min.js"></script>
<!-- 引入中文文件 -->
<script type="text/javascript"src="resources/easyui/locale/easyui-lang-zh_CN.js"></script>

<script type="text/javascript">
	$(function(){
		/* 配置datagrid属性 */
		$("#myDataGrid").datagrid({
			fit:true,
			title:'用户列表',
			fitColumns:true, //让对应的列按照比例设置宽度 ,如果不设置此属性,表头设置width就是固定宽度
			url:'admin/adminList.do',//数据 json串
			method:'get',
			pagination:true, //显示分页条
			toolbar:"#toolbar",
		});
		
		/* data-options="width:610,height:430,closed:true" */
		$("#myDialog").dialog({
			width:300,
			height:200,
			buttons:"#dialogButtons",
			closed:true,
		});
		
		//使用combobox 组件加载 角色
		$("#roleComBobox").combobox({
			url:"role/getAllRoles.do",
			valueField:'id',    
		    textField:'text'
		});
		
		
	});
	/* 格式化 用户是否可用列的显示效果 */
	function formatterAdminStatus(value,row,index){
		console.log(value,row,index);
		if(value == 0){
			return "是";
		}else{
			return "否";
		}
	}
	/* 格式化 日期 */
	function formatterCreateDate(value,row,index){
		var date = new Date(value);
		var y = date.getFullYear();
		var m = date.getMonth() + 1;
		var d = date.getDate();
		return y + '-' + m + '-' + d;
	}
	
	
	//使用json对象封装页面的所有js函数
	var cmdObj = {
		//新增打开对话框
		openDialog : function() {
			$("#myDialog").dialog("open");
			$("#myDialog").dialog("setTitle","新增后台用户");
			//清除角色数据
			$("#role_name").val("");
			
			//var json = {rows:[]}
			//使用datagrid 的reload 方法,加载本地数据，旧的行将被移除。
			//加载一个空数据
			$("#myPower").datagrid("loadData",{rows:[]});
			
		},
		//保存更新后台用户
		saveOrUpdateAdmin : function() {
			
			//获取角色id
			var admin_id = $("#admin_id").val();
			
			var url = "";
			if(admin_id != ""){
				url = "admin/updateAdmin.do"
			}else{
				url = "admin/addAdmin.do";
			}
			
			$('#adminForm').form('submit', {   
			    url:url,    
			    success:function(data){    
			        data = eval("("+data+")");
			    	if(data.code == 1){
			    		$.messager.alert("温馨提示",data.msg,'info');  
			    		//关闭对话框
			    		$("#myDialog").dialog("close");	
			    		//重新加载datagrid
			    		$("#myDataGrid").datagrid("reload");
			    		
			    	}else{
			    		$.messager.alert("温馨提示",data.msg,'error'); 
			    	}
			    	
			    }    
			}); 
		},
		del:function(){
			//1.获取选中行的数据 (json对象)
			var rowData = $("#myDataGrid").datagrid("getSelected");
			if(rowData == null){
				$.messager.alert("温馨提示","请选择需要删除的行",'warning'); 
				return;
			}
			//提示用户是否删除
			$.messager.confirm('确认','您确认想要删除记录吗？',function(r){    
			    if (r){    
			    	//2.获取选中行中数据的id
					var role_id = rowData.role_id;
					//3向后台发送ajax请求删除数据
					$.get("role/deleteRoleById.do",{"role_id":role_id},function(data){
						if(data.code == 1){
				    		$.messager.alert("温馨提示",data.msg,'info');  
				    		//重新加载datagrid
				    		$("#myDataGrid").datagrid("reload");
				    		
				    	}else{
				    		$.messager.alert("温馨提示",data.msg,'error'); 
				    	}
					});
			    }    
			});  
		},
		editAdmin:function(){
			//1.获取选中行的数据 (json对象)
			var rowData = $("#myDataGrid").datagrid("getSelected");
			if(rowData == null){
				$.messager.alert("温馨提示","请选择需要修改的行",'warning'); 
				return;
			}
			//会显表单数据: 调用表单的load方法
			$("#adminForm").form("load",rowData);
			
			//打开对话框
			$("#myDialog").dialog("open");	
			//设置标题
			$("#myDialog").dialog("setTitle","编辑后台用户");
	
		},
		//datagrid 菜单栏上面刷新按钮方法
		reload:function(){
			$("#myDataGrid").datagrid("load");
		},
		closeDialog:function(){
			$("#myDialog").dialog("close");
		}
	}
</script>

<!-- 添加角色对话框 -->
<div id="myDialog" class="easyui-dialog"
	>
	<form id="adminForm"  action="" method="post">
		<input type="hidden" id="admin_id" name="admin_id">
		<table style="margin-top: 10;" align="center">
			<tr>
				<td style="text-align: right;">用户名:<td>
				<td><input name="admin_name"  class="easyui-validatebox" data-options="{required:true}"></td>
			</tr>
			<tr>
				<td style="text-align: right;">密码:<td>
				<td><input name="admin_pass" type="password" value="123456"></td>
			</tr>
			<tr>
				<td style="text-align: right;">是否可用:<td>
				<td>
					是<input type="radio" name="admin_status" value="0" checked="checked">
					否<input type="radio" name="admin_status" value="1">
				</td>
			</tr>
			<tr>
				<td style="text-align: right;">角色:<td>
				<td>
					<input id="roleComBobox" name="role_id"  class="easyui-combobox"  data-options="{required:true}">
				</td>
			</tr>
		</table>

	</form>

</div>


<!-- 对话框底部的工具条 -->
<div id="dialogButtons">
	<a onclick="cmdObj.saveOrUpdateAdmin();" class="easyui-linkbutton" data-options="{iconCls:'icon-save',plain:true}">保存</a>
	<a onclick="cmdObj.closeDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-cancel',plain:true}">取消</a>
</div>

<!-- datagird 顶部工具条 -->
<div id="toolbar">
	<!-- 判断是否拥有此权限 -->
	<c:if test="${myFn:checkPermission('admin/addAdmin.do')}">
		<a onclick="cmdObj.openDialog();" class="easyui-linkbutton" data-options="{iconCls:'icon-add',plain:true}">新增</a> 
	</c:if>
	<c:if test="${myFn:checkPermission('admin/updateAdmin.do')}">
		<a onclick="cmdObj.editAdmin();" class="easyui-linkbutton" data-options="{iconCls:'icon-edit',plain:true}">修改</a> 
	</c:if>
	<c:if test="${myFn:checkPermission('admin/deleteAdminById.do')}">
		<a onclick="cmdObj.del();" class="easyui-linkbutton" data-options="{iconCls:'icon-remove',plain:true}">删除</a>
	</c:if>
	<a  onclick="cmdObj.reload();"class="easyui-linkbutton" data-options="{iconCls:'icon-reload',plain:true}">刷新</a>
</div>

<!-- datagrid 组件 -->
<table  id="myDataGrid" class="easyui-datagrid" >
	<thead>
			<tr>
				<!-- 
				配置列属性
				field : 后台数据对应的属性名称
				width :设置列的宽度,如果 datagrid 设置 fitColumns:true, width就是按照比例设置宽度
				formatter 自定义格式化列数据的显示效果
				 -->
				<th data-options="field:'admin_id',width:1">序号</th>
				<th data-options="field:'admin_name',width:1">用户名</th>
				<th data-options="field:'create_date',width:1,align:'right',formatter:formatterCreateDate">创建日期</th>
				<th data-options="field:'admin_status',width:1,align:'right',formatter:formatterAdminStatus">是否可用</th>
				<th data-options="field:'role_name',width:1">角色名称</th>
			</tr>
			
		</thead>
</table >